<template>
  <div style="width:100%">
    <el-row :gutter="20">
      <el-col v-if="isButton"><div style="text-align: right;padding-right: 10px;"><el-button @click="addCard" type="primary" :disabled="!mixEditable">新增</el-button></div></el-col>
      <el-checkbox-group v-model="selectItems">
        <el-col v-for="(data, index) in currentPageData" :key="index" :span="cardWidth">
          <div class="card_item" @dblclick="getCurrentCardList(data)">
            <el-checkbox v-if="selectable" :label="data.id" name="card">{{  }}</el-checkbox>
            <div class="status">
              <slot name="status" :data="data">
                  {{ data.status }}
              </slot>
            </div>
            <div class="title">{{ data.title }}</div>
            <div v-for="i in data.content"  class="content">
              <el-tooltip class="item" effect="dark" :content="i.value" v-if="i.value?(i.value.length >10):false" placement="top-start">
                <div>{{ i.key }}: {{i.value?( i.value.length >10 ?i.value.slice(0,9)+'...': i.value):''}}</div>
               </el-tooltip>
               <div v-else>{{ i.key }}: {{i.value?( i.value.length >10 ?i.value.slice(0,9)+'...': i.value):''}}</div>
            </div>
            <slot name="other" :data="data">
            </slot>
          </div>
        </el-col>
      </el-checkbox-group>
    </el-row>
    <Pagination
      :page-size="query.limit"
      :current-page.sync="query.offset"
      :total="totla"
      @size-change="changePageSizer"
      @current-change="changePage"
    />
  </div>
</template>
<script>
export default {
  name: 'cardView',
  props: {
    value: '',
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    isSelected: {
      type: String | Boolean,
      default: false
    },
    cardWidth: {
      type: String,
      default: '8'
    },
    totla: {
      type: Number,
      default: 0
    },
    isButton: {
      type: Boolean,
      default: 0
    },
    //status  published 已发布,daraft 草稿, offshelf下架
    cardArr: {
      type: Array,
      dafault: () => [{
        id: '0',
        title: '关于云资源订单重复支付的纠纷',
        status: '已发布',
        content: [{key: '申请对象', value: '开发者用户'},{
          key: '发生时间', value:'2023-12-12 13:00'
        },{
          key: '纠纷类型', value:'支付纠纷'
        },{
          key: '事件经过', value:'嗒啦嘀嗒啦嗒啦嘀嗒啦嗒啦嘀嗒啦嗒啦嘀嗒啦嗒啦嘀嗒啦'
        },{
          key: '满意度', value:'78%'
        }]
      }]
    }
  },
  computed: {
    isDesigner(){
      return this.$attrs._source === 'designer'
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
    // 可选
    selectable() {
      return this.isSelected === 'true' || this.isSelected === true
    },
    currentPageData() {
      if (this.isDesigner) {
        return this.demolist
      } else {
        const {limit, offset} = this.query
        return this.cardArr
      }
    },
    gridTotal() {
      return Array.isArray(this.cardArr) && this.cardArr.length || 0
    }
   
  },
  data() {
    return {
      demolist: [{
        id:'0',
        title: '关于云资源订单重复支付的纠纷',
        status: '已发布',
        content: [{key: '申请对象', value: '开发者用户'},{
          key: '发生时间', value:'2023-12-12 13:00'
        },{
          key: '纠纷类型', value:'支付纠纷'
        },{
          key: '事件经过', value:'*****'
        },{
          key: '满意度', value:'78%'
        }]
      },{
        id:'1',
        title: '关于云资源订单重复支付的纠纷',
        status: '已发布',
        content: [{key: '申请对象', value: '开发者用户'},{
          key: '发生时间', value:'2023-12-12 13:00'
        },{
          key: '纠纷类型', value:'支付纠纷'
        },{
          key: '事件经过', value:'***'
        },{
          key: '满意度', value:'78%'
        }]
      },
      {
        id:'2',
        title: '关于云资源订单重复支付的纠纷',
        status: '已发布',
        content: [{key: '申请对象', value: '开发者用户'},{
          key: '发生时间', value:'2023-12-12 13:00'
        },{
          key: '纠纷类型', value:'支付纠纷'
        },{
          key: '事件经过', value:'****'
        },{
          key: '满意度', value:'78%'
        }]
      }],
      query: {
        limit: 10,
        offset: 1
      },
      selectItems: []
    }
  },
  created(){
  },
  watch: {
    
  },
  methods: {
    // 传勾选数据
    getSelections() {
      const data = this.cardArr.filter(item => this.selectItems.includes(item.id))
      return data
    },
    // 双击时传参
    getCurrentCardList(item) {
      if (this.mixEditable) {
        this.$emit('buttonClick', {
          type: 'edit',
          data: item
        })
      }
    },
    addCard() {
      this.$emit('buttonClick', {
        type: 'add',
        data: {}
      })
    },
    changePageSizer(pageSize) {
      console.log(pageSize ,'222222222222222')
      this.query.limit = pageSize
      this.$emit('changePages',this.query)
    },
    changePage(index) {
      
      this.query = {
        ...this.query,
        offset: index || 1
      }
      console.log(this.query ,'1111111111111111')
      this.$emit('changePages',this.query)
    },
  }
}
</script>
<style lang="scss" scoped>
  .card_item {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
    position: relative;
    .status {
      position: absolute;
      top: 2px;
      right: 2px;
    }
    .title {
      font-size: 15px;
      font-weight: 700;
    }
  }.el-checkbox-group {
    font-size: 14px;
  }
</style>